<!--
 * @Author: your name
 * @Date: 2020-08-22 01:51:42
 * @LastEditTime: 2020-08-26 21:41:54
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \exam-list\src\components\checkpaper\PaperDetail.vue
-->
<template>
  <div>
    <h2>教室管理</h2>
    <!-- 添加按钮 -->
    <Button type="primary" @click="AddItem">+添加教室</Button>
    <!-- 表格 -->
    <Table border :columns="columns" :data="roomList">
      <template slot-scope="{ row }" slot="room_text">
        <strong>{{ row.room_text }}</strong>
      </template>
      <template slot-scope="{ row }" slot="action">
        <span type="error" size="small" class="del" @click="remove(row)" style="cursor:pointer">删除</span>
        <span type="error" size="small" @click="editItem(row)" style="cursor:pointer">编辑</span>
      </template>
    </Table>
    <!-- 添加弹框 -->
    <Modal v-model="modal" title="添加班级" @on-ok="ok" @on-cancel="cancel" width="500">
      <Form ref="formInline" :model="formInline" :rules="ruleInline" :label-width="100" inline>
        <FormItem label="教室号" prop="room_text">
          <Input v-model="formInline.room_text" style="width: 350px" placeholder="教室名" />
        </FormItem>
      </Form>
    </Modal>
    <!-- 编辑 -->
    <Modal v-model="flag" title="编辑班级" @on-ok="okEdit" @on-cancel="cancelEdit" width="500">
      <Form ref="formEditInline" :model="formInline" :rules="ruleInline" :label-width="100" inline>
        <FormItem label="教室号" prop="room_text">
          <Input v-model="editForm.room_text" style="width: 350px" placeholder="教室名" />
        </FormItem>
      </Form>
    </Modal>
  </div>
</template>

<script>
import { mapActions, mapState } from 'vuex'
export default {
  data() {
    return {
      editForm: {},
      formInline: {
        room_text: ''
      },
      ruleInline: {
        room_text: [
          {
            required: true,
            message: '请输入教室号',
            trigger: 'blur'
          }
        ]
      },
      columns: [
        {
          title: '教室号',
          key: 'room_text'
        },
        {
          title: '操作',
          slot: 'action',
          width: 150,
          align: 'center'
        }
      ],
      modal: false, // 添加弹框开关
      flag: false // 编辑弹框开关
    }
  },
  methods: {
    ...mapActions('GetRoom', [
      'getRoomList',
      'addRoomList',
      'deleteRoomList',
      'editRoomItem'
    ]),
    editItem(row) {
      // 编辑
      console.log(row, 'ppppp')
      this.flag = true
      this.editForm = JSON.parse(JSON.stringify(row))
    },
    okEdit() {
      // 编辑确定
      const obj = {
        room_id: this.editForm.room_id,
        room_text: this.editForm.room_text
      }
      this.editRoomItem(obj)
      this.getRoomList()
    },
    cancelEdit() {
      // 编辑取消
    },
    remove(row) {
      // 删除
      this.$Modal.confirm({
        title: '确定要删除此教室吗？',
        content: '',
        onOk: () => {
          const obj = { room_id: row.room_id }
          this.deleteRoomList(obj)
          this.getRoomList()
        },
        onCancel: () => {
          this.$Message.info('取消删除')
        }
      })
    },
    AddItem() {
      // 添加
      this.modal = true
    },
    ok() {
      // 添加确定
      console.log('ok')
      this.$refs.formInline.validate(valid => {
        if (valid) {
          const obj = { room_text: this.formInline.room_text }
          console.log(obj)
          this.addRoomList(obj)
          this.getRoomList()
        } else {
          return false
        }
      })
    },
    cancel() {
      // 添加取消
      // console.log('no')
    }
  },
  computed: {
    ...mapState('GetRoom', ['roomList'])
  },
  mounted() {
    this.getRoomList()
  }
}
</script>

<style lang="scss" scoped>
button {
  margin-bottom: 20px;
  margin-top: 20px;
}
h2 {
  margin-top: 20px;
}
.tem {
  display: flex;
  justify-content: space-around;
}
.del {
  margin-right: 20px;
}
</style>
